{extend name="layouts/main-layui-vue-index" /}
{block name="title"}{__block__}{/block}
{block name="header"}{/block}
{block name="beforeDiv"}{/block}
{block name="appDiv"}
<div>
    <lay-card>
        <p class="top-title">分步表单</p>
        <p class="describe">
            表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。表单域标签也可支持响应式.
        </p>
    </lay-card>
    <lay-container :fluid="true" style="padding: 10px; padding-top: 0px">
        <lay-card style="padding: 40px">
            <lay-step :active="active" current-status="primary" center>
                <lay-step-item title="第一步" content="填写转账信息">
                    <template #pace>
                        <lay-icon type="layui-icon-ok"></lay-icon>
                    </template>
                </lay-step-item>
                <lay-step-item title="第二步" content="确认转账信息"></lay-step-item>
                <lay-step-item title="第三步" content="转账成功"></lay-step-item>
            </lay-step>

            <div class="step-form">
                <lay-notice-bar
                        v-show="active < 2"
                        leftIcon="layui-icon-help-circle"
                        rightIcon="layui-icon-close"
                        :text="
              active < 1
                ? '请确认您填写的信息无误哦'
                : '确认转账后，资金将直接打入对方账户，无法退回'
            "
                        background="#ecf5ff"
                ></lay-notice-bar>
                <div style="height: 20px"></div>

                <lay-form
                        v-show="active != 2"
                        :model="formValue"
                        label-width="120"
                        :pane="active == 1"
                >
                    <lay-form-item label="付款账户" prop="account" required>
                        <lay-input
                                :allow-clear="true"
                                v-model="formValue.account"
                        ></lay-input>
                    </lay-form-item>
                    <lay-form-item label="收款账户" prop="payee" required>
                        <lay-row :span="24">
                            <lay-col md="6">
                                <lay-select
                                        :allow-clear="true"
                                        style="width: 100%; display: inline-block"
                                        v-model="formValue.payType"
                                        placeholder="请选择"
                                >
                                    <lay-select-option value="zhifubao" label="支付宝">
                                    </lay-select-option>
                                    <lay-select-option value="weixin" label="微信">
                                    </lay-select-option>
                                </lay-select>
                            </lay-col>
                            <lay-col md="18">
                                <lay-input
                                        style="width: 100%; display: inline-block"
                                        v-model="formValue.payee"
                                >
                                </lay-input>
                            </lay-col>
                        </lay-row>
                    </lay-form-item>
                    <lay-form-item label="收款人姓名" prop="payeeName" required>
                        <lay-input
                                :allow-clear="true"
                                v-model="formValue.payeeName"
                        ></lay-input>
                    </lay-form-item>
                    <lay-form-item label="转账金额" prop="amount" required>
                        <lay-input :allow-clear="true" v-model="formValue.amount">
                            <template #prefix> ￥</template>
                        </lay-input>
                    </lay-form-item>
                    <lay-form-item v-show="active == 1" label="支付密码" prop="password" required>
                        <lay-input
                                :allow-clear="true"
                                type="password"
                                v-model="formValue.password"
                        >
                        </lay-input>
                    </lay-form-item>
                </lay-form>
                <div v-if="active == 2" class="option-result">
                    <div style="width: 100%; height: 210px; text-align: center">
                        <img src="/plugin/admin/public/img/demos/success.png" alt="" style="width: 80px; height: 80px"/>
                        <div style="
                  font-size: 20px;
                  color: #101662;
                  font-weight: 600;
                  margin-top: 15px;
                ">
                            操作成功
                        </div>
                        <div style="font-size: 12px; color: #ccc; margin-top: 5px">
                            预计两小时内到账
                        </div>

                        <div style="font-size: 10px; color: #ccc; margin-top: 15px">
                            <lay-button size="sm" type="normal" @click="next">
                                在转一笔
                            </lay-button>
                            <lay-button size="sm"> 查看账单</lay-button>
                        </div>
                    </div>

                    <lay-row>
                        <lay-col md="4" class="title">付款账户</lay-col>
                        <lay-col md="20" class="content borderR">
                            {{ formValue.account }}
                        </lay-col>
                    </lay-row>
                    <lay-row>
                        <lay-col md="4" class="title">收款账户</lay-col>
                        <lay-col md="20" class="content borderR">
                            {{ formValue.payee }}
                        </lay-col>
                    </lay-row>
                    <lay-row>
                        <lay-col md="4" class="title">收款人姓名</lay-col>
                        <lay-col md="20" class="content borderR">
                            {{ formValue.payeeName }}
                        </lay-col>
                    </lay-row>
                    <lay-row>
                        <lay-col md="4" class="title borderB">转账金额</lay-col>
                        <lay-col md="20" class="content borderR borderB">
                <span style="font-size: 18px">
                  {{ formValue.amount }} &nbsp;</span
                >元
                        </lay-col>
                    </lay-row>
                </div>
                <lay-row style="margin-top: 0px" v-if="active < 2">
                    <div style="display: inline-block; width: 120px"></div>
                    <lay-button
                            type="primary"
                            :style="{
                marginRight: '15px',
                marginLeft: active < 1 ? '15px' : '0px'
              }"
                            size="sm"
                            @click="next"
                    >
                        下一步
                    </lay-button>
                    <lay-button size="sm" v-show="active > 0" @click="previous">
                        上一步
                    </lay-button>
                </lay-row>
            </div>
        </lay-card>
    </lay-container>
</div>
{/block}
{block name="afterDiv"}
<script>
    vue_data = {
        model: reactive({
            username: 'admin',
            password: '123456',
            specialty: '1',
            hobby: '1',
            desc: '修复开启 isLazyimg:true 后, 图片懒加载但是图片不存在的报错问题'
        }),

        loading: ref(true),
        active: ref(0),
        formValue: reactive({
            account: 'layuivueadmin@layui-vue.com',
            payType: 'zhifubao',
            payee: 'layuivueadmin@layui-test',
            payeeName: 'layuivueAdmin',
            amount: '500',
            password: '123456'
        })
    };
    vue_setup = {};
    methods = {
        onLoad() {
            console.log('页面初始化请求数据并加载')
        },
        submitClick() {
            layer.msg(`${JSON.stringify(this.model)}`, () => {
            })
        },
        next() {
            if (this.active++ >= 2) this.active = 0
        },
        previous() {
            if (this.active-- === 0) this.active = 0
        },
        toReset() {
            this.formValue.account = ''
            this.formValue.payType = 'zhifubao'
            this.formValue.payee = ''
            this.formValue.payeeName = ''
            this.formValue.amount = ''
            this.formValue.password = ''
        },
        submit2() {
            layer.open(`${JSON.stringify(this.model)}`)
        }
    };
    watch = {};
    computed = {};
    mounted = function () {
        this.onLoad();
    };
    updated = function () {
    };
</script>

<style lang="less" scoped>
    .top-title {
        font-size: 20px;
        font-weight: 500;
        margin-top: 12px;
        margin-bottom: 20px;
    }

    .describe {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .step-form {
        width: 100%;
        padding: 20px 150px;
        box-sizing: border-box;

        .layui-row:after,
        .layui-row:before {
            display: none;
        }
    }

    .option-result {
        width: 100%;
        height: 400px;
        font-size: 14px;
    }

    .option-result .title {
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
        display: inline-block;
        background: #f7f7f7;
        border-top: 1px solid #e8e8e8;
        border-left: 1px solid #e8e8e8;
    }

    .option-result .content {
        height: 40px;
        line-height: 40px;
        padding: 0 3px 0 10px;
        border-top: 1px solid #e8e8e8;
        border-left: 1px solid #e8e8e8;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
    }

    .option-result .borderR {
        border-right: 1px solid #e8e8e8;
    }

    .option-result .borderB {
        border-bottom: 1px solid #e8e8e8;
    }

</style>
{/block}
{block name="constApp"}{__block__}{/block}
{block name="plugins"}{/block}
{block name="mountApp"}{__block__}{/block}